<script setup lang="ts">
import VDialog from "@/components/VDialog/VDialog.vue";
import { computed, reactive, ref } from "vue";
import {
  AddReformMainCommand,
  ReformMainPageResponse,
  UpdateReformMainCommand,
  addReformMainApi,
  updateReformMainApi
} from "@/api/airport/reform/reformMain";
import { ElMessage, FormInstance, FormRules } from "element-plus";

interface Props {
  type: "add" | "update";
  modelValue: boolean;
  row?: ReformMainPageResponse;
}

const props = defineProps<Props>();
const emits = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
  (e: "success"): void;
}>();

const visible = computed({
  get: () => props.modelValue,
  set(v) {
    emits("update:modelValue", v);
  }
});

const formData = reactive<AddReformMainCommand | UpdateReformMainCommand>({
  code: "",
  relatedQuestionId: 0,
  questionSourceName: "",
  inspectors: "",
  reformId: 0,
  questionTitle: "", // 添加 questionTitle 属性
  reformStatus: "" // 添加 reformStatus 属性
});

const rules: FormRules = {
  code: [
    {
      required: true,
      message: "整改通知书编号不能为空"
    }
  ],
  relatedQuestionId: [
    {
      required: true,
      message: "相关问题ID不能为空"
    }
  ],
  questionSourceName: [
    {
      required: true,
      message: "问题来源名称不能为空"
    }
  ],
  inspectors: [
    {
      required: true,
      message: "检查人员不能为空"
    }
  ],
  questionTitle: [
    {
      required: true,
      message: "整改内容不能为空"
    }
  ],
  reformStatus: [
    {
      required: true,
      message: "当前状态不能为空"
    }
  ]
};
const formRef = ref<FormInstance>();
function handleOpened() {
  if (props.row) {
    Object.assign(formData, props.row);
  } else {
    formRef.value?.resetFields();
  }
}

const loading = ref(false);
async function handleConfirm() {
  try {
    loading.value = true;
    if (props.type === "add") {
      await addReformMainApi(formData as AddReformMainCommand);
    } else if (props.type === "update") {
      await updateReformMainApi(formData as UpdateReformMainCommand);
    }
    ElMessage.info("提交成功");
    visible.value = false;
    emits("success");
  } catch (e) {
    console.error(e);
    ElMessage.error((e as Error)?.message || "提交失败");
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <v-dialog
    show-full-screen
    :fixed-body-height="false"
    use-body-scrolling
    :title="type === 'add' ? '新增整改通知书' : '更新整改通知书'"
    v-model="visible"
    :loading="loading"
    @confirm="handleConfirm"
    @cancel="visible = false"
    @opened="handleOpened"
  >
    <el-form :model="formData" label-width="120px" :rules="rules" ref="formRef">
      <el-form-item prop="code" label="整改通知书编号" required inline-message>
        <el-input v-model="formData.code" />
      </el-form-item>
      <el-form-item prop="questionSourceName" label="问题来源名称" required>
        <el-input v-model="formData.questionSourceName" />
      </el-form-item>
      <el-form-item prop="inspectors" label="检查人员" required>
        <el-input v-model="formData.inspectors" />
      </el-form-item>
      <!-- 新增表单项 -->
      <el-form-item prop="questionTitle" label="整改内容" required>
        <el-input v-model="formData.questionTitle" />
      </el-form-item>
      <el-form-item prop="reformStatus" label="当前状态" required>
        <el-select v-model="formData.reformStatus">
          <el-option label="措施已制定待审核" value="1" />
          <el-option label="措施审核通过执行中" value="2" />
          <el-option label="措施审核不通过" value="3" />
          <el-option label="整改效果审核通过" value="4" />
          <el-option label="未分析原因制定措施" value="5" />
          <el-option label="整改效果审核不通过" value="6" />
        </el-select>
      </el-form-item>
      <el-form-item prop="issueDeptName" label="督察部门">
        <el-input v-model="formData.issueDeptName" />
      </el-form-item>
      <el-form-item prop="dutyDeptName" label="责任部门">
        <el-input v-model="formData.dutyDeptName" />
      </el-form-item>
      <el-form-item prop="checkDate" label="检查日期">
        <el-input v-model="formData.checkDate" />
      </el-form-item>
      <el-form-item prop="correctiveAction" label="整改措施" required>
        <el-input v-model="formData.correctiveAction" />
      </el-form-item>
      <el-form-item prop="precautionDeadline" label="整改截至时间" required>
        <el-date-picker
          v-model="formData.precautionDeadline"
          type="date"
          placeholder="选择整改截至时间"
        />
      </el-form-item>
      <el-form-item prop="actionMakerName" label="措施指定人" required>
        <el-input v-model="formData.actionMakerName" />
      </el-form-item>
    </el-form>
  </v-dialog>
</template>
